<template>
  <!-- 表单 -->
<el-form ref="addForm" :model="formData" :rules="rules" label-width="120px">
  <el-form-item label="姓名" prop="username">
    <el-input v-model="formData.username" style="width:50%" placeholder="请输入姓名" />
  </el-form-item>

  <el-form-item label="手机" prop="mobile">
    <el-input v-model="formData.mobile" style="width:50%" placeholder="请输入手机号" />
  </el-form-item>

  <el-form-item label="入职时间" prop="timeOfEntry">
    <el-date-picker v-model="formData.timeOfEntry" style="width:50%" placeholder="请选择入职时间" />
  </el-form-item>

  <el-form-item label="聘用形式" prop="formOfEmployment">
    <el-select v-model="formData.formOfEmployment" style="width:50%" placeholder="请选择" >
      <el-option v-for="item in hireType" :key="item.id" :label="item.value" :value="item.id"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item label="工号" prop="workNumber">
    <el-input v-model="formData.workNumber" style="width:50%" placeholder="请输入工号" />
  </el-form-item>

  <el-form-item label="部门" prop="departmentName">
    <el-input v-model="formData.departmentName" style="width:50%" @focus="hFocus" placeholder="请选择部门" />
    <div class="tree-box" v-if="showTree">
      <el-tree @node-click="handLeNode" :data="treeList" :props="{label:'name',children:'children'}"></el-tree>
    </div>
  </el-form-item>

  <el-form-item label="转正时间" prop="correctionTime">
    <el-date-picker v-model="formData.correctionTime" style="width:50%" placeholder="请选择转正时间" />
  </el-form-item>

    <el-form-item>
      <el-button @click="$emit('close')">取消</el-button>
      <el-button type="primary" @click="hSubmit">确定</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
// 导入枚举包
import EmployeesEnum from '@/constant/employees.js'
console.log('EmployeesEnum',EmployeesEnum); //EmployeesEnum.hireType
// 导入查询部门列表接口
import { getDepartments } from "@/api/departments";
// 导入转换树形数据的包
import { transDataToTreeData } from "@/utils/index";
// 导入新增员工的接口
import { addEmployees } from '@/api/employees'
export default {
  data() {
  return {
    showTree:false, //控制树形结构的显示与隐藏
    treeList:[],
     hireType: EmployeesEnum.hireType,   //EmployeesEnum.hireType 是枚举数据包里面的
     formData: {
      username: '',         // 用户名
      mobile: '',           // 手机号
      formOfEmployment: '', // 聘用形式
      workNumber: '',       // 工号
      departmentName: '',   // 部门
      timeOfEntry: '',      // 入职时间
      correctionTime: ''    // 转正时间
    },
        rules: {
          username: [
            { required: true, message: '用户姓名不能为空', trigger: 'blur'},
            { min: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '手机号不能为空', trigger: 'blur' },
            { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
          ],
          formOfEmployment: [
            { required: true, message: '聘用形式不能为空', trigger: 'blur' }
          ],
          workNumber: [
            { required: true, message: '工号不能为空', trigger: 'blur' }
          ],
          departmentName: [
            { required: true, message: '部门不能为空', trigger: 'change'}
          ],
          timeOfEntry: [
            { required: true, message: '请选择入职时间', trigger: 'blur' }
          ]
    }
  }
},
// created(){
 // },
methods:{
  // 重置表单   (这里定义一个重置表单的方法,在父组件中调用 才能实现重置)
  resetForm(){
  this.$refs.addForm.resetFields()
  },
  // 新增员工
  async doAdd(){
      try {
      const res = await addEmployees(this.formData)
      console.log('addEmployees', res)
      this.$emit('success')

    } catch (err) {
      console.log('addEmployees', err)
    }
  },
  // 树形结构点击事件的回调
  handLeNode(data){
   console.log('data',data);//name /children
   if(data.children.length!==0){
    // 如果data里面的children的长度不为0 则retrun
    return
   }
  //  将当前的节点数据给表单  渲染到input框中
  this.formData.departmentName=data.name
  this.showTree=false
  },
  // 获取光标,渲染部门列表数据,展示树形结构
  hFocus(){
    this.showTree=true
     this.loadDepartments()
  },
  // 获取部门数据, 并把平铺数据转换为树形结构
  async loadDepartments(){
    try {
      const res = await getDepartments()
      console.log('getDepartments', res)  //res.data.depts
      res.data.depts.shift()   //去除数组中的第一个参数
       // 保存数据
      //  this.list=res.data.depts   //因为这是平铺数据  而我们实际要用树形数据  所以需要转换一下   要倒入转树形的包
      this.treeList=transDataToTreeData(res.data.depts)
    } catch (err) {
      console.log('getDepartments', err)
    }
  },
  // 确定按钮
  hSubmit() {
      this.$refs.addForm.validate(valid => {
      if(valid) {
      // 做添加
      this.doAdd()
      // this.$emit('close')
    }
  })
}
}

}
</script>